<template>
  <div>
    <home-head title="" />
    <img class="title-img"
         src="../../assets/img/hualogo.png">
    <div class="detail-wrap">
      <!-- 轮播 -->
      <van-swipe class="my-swipe"
                 :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item v-for="pic in pics"
                        :key="pic.id">
          <img :src="pic.pic"
               alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <h3>{{ basicInfo.name }}</h3>
      <div class="content"
           v-html="content"></div>
    </div>
    <!-- 商品规格弹窗 -->
    <van-popup v-model="show"
               position="bottom"
               closeable
               :style="{ height: '30%' }">
      <div>
        <van-card :num="sku.num"
                  :price="sku.minPrice * sku.num"
                  :title="sku.name"
                  :thumb="sku.pic">
          <template #footer>
            <van-stepper v-model="sku.num" />
            <van-button @click="$store.commit('home/add_Cart',{id:$route.query.id, num:sku.num})"
                        type="danger"
                        size="large">
              确定
            </van-button>
          </template>
        </van-card>
      </div>
    </van-popup>
    <!-- /商品规格弹窗 -->
    <!-- 提交购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o"
                             text="首页"
                             @click="$router.push('/home')" />
      <van-goods-action-icon icon="shop-o"
                             :badge="$store.state.cart.items.length || ''"
                             text="购物车"
                             @click="$router.push('/cart')" />
      <van-goods-action-button type="danger"
                               text="加入购物车"
                               @click="showsku" />
    </van-goods-action>
    <!-- /提交购物车 -->
  </div>
</template>

<script>
import HomeHead from 'components/HomeHead'
import { fetchDetail } from 'api'
export default {
  name: 'Detail',
  data () {
    return {
      basicInfo: {},
      pics: [],
      content: '',
      show: false,
      sku: {
        num: 1
      }
    }
  },
  created () {
    this.fetchDetails()
    this.$store.state.home.Homethis = this
  },
  methods: {
    showsku () {
      this.show = true
    },
    fetchDetails () {
      fetchDetail(this.$route.query.id).then(res => {
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: {
    HomeHead
  }
}
</script>

<style lang="scss" scoped>
.detail-wrap {
  padding-top: 46px;
  padding-bottom: 50px;
  /deep/.van-swipe-item {
    img {
      width: 100%;
    }
  }
}
.title-img {
  width: 150px;
  height: 20px;
  position: absolute;
  top: 12px;
  left: 110px;
  z-index: 100;
}
</style>
